<template>
    <section class="embroidery-pricing">
        <h2>Pricing</h2>
        <ProductDetailPriceTable :table="priceTable" :loading="price_loading" :type="'embroidery'">
        </ProductDetailPriceTable>
        <p>*The number of thread colors you select won't change the cost of your embroidery.</p>
        <p>*No digitization fees, whether you upload DST files or add custom text.</p>
        <div class="embroidery-pricing-started">
            <ul>
                <li><strong>•</strong>No Order Minimums</li>
                <li><strong>•</strong>No Sale, No Charge</li>
                <li><strong>•</strong>No Unsold Stock</li>
                <li><strong>•</strong>No Quality Concerns</li>
            </ul>
            <h3>Only Creativity, Satisfaction, and Profits!</h3>
            <button @click="openWindow('/product')">Get Started</button>
        </div>
    </section>
</template>
<script>
export default {
    data () {
        return {
            priceTable: [],
            price_loading: false,
            option: {
                expire_time: 60 * 60 * 24 * 1000
            },
        }
    },
    methods: {
        openWindow (url) {
            window.open(url, "_blank");
        },
        async getPriceData () {
            let send_ajax = true;
            try {
                const storage = JSON.parse(localStorage.getItem('EMB_OPT'));
                const now = new Date().getTime();
                if (storage.expire - now > 0) {
                    send_ajax = false;
                    this.priceTable = storage.value;
                }
            } catch (error) { }
            if (!send_ajax) return
            this.price_loading = true;
            const response = await this.$http("getEmbOpt");
            this.price_loading = false;
            if (response.code == 0) {
                localStorage.setItem('EMB_OPT', JSON.stringify({ value: response.data, expire: new Date().getTime() + this.option.expire_time }))
                this.priceTable = response.data;
            } else {
                this.$message.warning(response.data.msg)
            }
        },
    },
    mounted () {
        this.getPriceData()
    },
}
</script>
<style scoped lang="scss">
.embroidery-pricing {
    min-height: auto !important;
    padding: 135px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &>* {
        width: 100%;
        max-width: 1012px;
    }

    figure {
        width: 100%;
        margin-bottom: 14px;

        img {
            width: 100%;
        }
    }

    h2 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 44px;
        color: #000000;
        line-height: 60px;
        margin-bottom: 48px;
        text-align: center;
    }

    p {
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
        line-height: 24px;
    }

    .embroidery-pricing-started {
        position: relative;
        margin-top: 40px;
        padding-top: 86px;
        display: flex;
        flex-direction: column;
        align-items: center;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 1px;
            background-image: linear-gradient(to right,
                    #ededed 0%,
                    #ededed 50%,
                    transparent 50%);
            background-size: 12px 1px;
            background-repeat: repeat-x;
        }

        ul {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;

            li {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 16px;
                line-height: 26px;
                color: #000000;
                margin: 0 16px 10px;

                strong {
                    padding-right: 8px;
                    color: #EDB002;
                }
            }
        }

        h3 {
            text-align: center;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 28px;
            color: #000000;
            line-height: 40px;
            margin-bottom: 48px;
        }

        button {
            width: 248px;
            height: 52px;
            background: linear-gradient(315deg, #FF813F 0%, #EA4C89 100%);
            border-radius: 10px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 24px;
            border: none;

            &:hover {
                color: rgba($color: #FFFFFF, $alpha: .5);
            }
        }
    }
}

.embroidery-pricing::v-deep {

    .overflow-box {
        width: 100%;
        max-width: 1012px;
        margin-bottom: 14px;

        table {
            width: 100%;
            max-width: 1012px;
        }
    }
}

.embroidery-pricing.animation-none {
    padding: 60px 14px;

    h2 {
        margin-bottom: 20px;
        font-size: 24px;
        line-height: 28px;
    }

    .embroidery-pricing-started {
        padding-top: 50px;
    }
}
</style>